<script>
  import "@/assets/common/base.css"
  import leftBar from '@/components/leftBar';
  import topHeader from '@/components/topHeader';
  import chooseDate from '@/components/chooseDate';
  import chooseShopDailog from '@/components/chooseShopDailog';
  import billPanel from '@/components/billPanel';
  import financalList from '@/components/financalList';
  import listNav from '@/components/listNav';
  import { basicDataTest,shopDataTest,themeDataTest,dateDataTest,listDataTest,themeListDataTest,listNavData,financalData} from "@/common/data.js";
  const { Fetch } = require("@/common/fetch");
  const _dev_ = false;
  const basicData = Fetch('/admin/finance/api/page.php?action=get_base');
  const shopData = Fetch('/admin/finance/api/page.php?action=get_shop');
  export default {
    name: "Financal",
    components:{leftBar,topHeader,chooseDate,chooseShopDailog,billPanel,financalList,listNav},
    data(){
      return{
        switchShopVisible:false,
        left_menu:_dev_ ? basicDataTest.left_menu : [], //左侧导航数据
        topHeader:_dev_ ? basicDataTest.user : {},      //用户信息
        listNavData:listNavData,           //用户信息
        shops:_dev_? shopDataTest:[],
        billData:false,             //账单数据
        billListData:_dev_ ? financalData : [],         //列表数据
        total:0,                                        //数据数量
        currentData:{
          channel:'',
          shop_name:'全部门店',
          shop_id:'',
          state:'',
          pay_type:'',
          page:1,
          page_num:10
        }
      }
    },
    methods:{
      handleChooseShop() {
        this.switchShopVisible = true;
      },
      closeChooseShop(){
        this.switchShopVisible = false;
      },
      handleShopChange(row){
        this.currentData = {...this.currentData,...row};
        this.switchShopVisible = false;
      },
      searchBill(){
        const self  = this;
        const {shop_id} = this.currentData;
        const {start,end} = this.$refs['date'].getDate();
        const billData = Fetch(`/admin/finance/api/financial_statements.php?action=get_statements&start_date=${start}&end_date=${end}&shop_id=${shop_id}`);
        billData.then((res)=>{
          if(res && res.data){
            self.billData = res.data;
            // 默认渠道
            self.currentData.channel = res.data.list && res.data.list[0].channel;
            self.currentData.state="";
            self.currentData.pay_type="";
            self.searchList();
          }else{
            this.$message(res.message);
          }
        })
      },
      handleListChange(data){
        if(data){
          this.currentData = {...this.currentData,...data};
        }
      },
      searchList(opt){
        const self  = this;
        const dateOpt = this.$refs['date'].getDate();
        if(!dateOpt){
          this.$message('请选择至少一个有效日期');
          return;
        }
        const {start,end} = dateOpt;
        this.currentData = {...this.currentData,...opt}
        const {shop_id,channel,state,pay_type,page,page_num} = this.currentData;
        this.billListData = [];
        const billListData = Fetch(`/admin/finance/api/financial_statements.php?action=get_statements_detail&start_date=${start}&end_date=${end}&shop_id=${shop_id}&channel=${channel}&state=${state}&pay_type=${pay_type}&page=${page}&&page_num=${page_num}`)
        billListData.then((res)=>{
          if(res && res.data){
            self.billListData = res.data;
            self.total = res.count;
          }
        })
      },
      uploadFinancalBill(){
        const dateOpt = this.$refs['date'].getDate();
        if(!dateOpt){
          this.$message('请选择至少一个有效日期');
          return;
        }
        const {start,end} = dateOpt;
        let {shop_id} = this.currentData;
        window.open(`/admin/finance/api/financial_statements.php?action=get_statements_download&start_date=${start}&end_date=${end}&shop_id=${shop_id}`);
      }
    },
    mounted(){
      basicData.then((response)=>{
        const {left_menu,user}  = response.data;
        this.left_menu = left_menu;
        this.topHeader= user;
      });
      shopData.then((response)=>{
        const {data} = response;
        this.shops = data;
        if(data.length){
          this.currentData = {...this.currentData,...data[0]};
        }
      });
    }

  }
</script>

<template>
  <div id="traiding">
    <el-container>
      <el-aside width="170px">
        <leftBar :parcel="left_menu"/>
      </el-aside>

      <el-container>
        <el-header height="80px">
          <topHeader :parcel="topHeader"/>
        </el-header>
        <el-main class="m-container">
          <h2 class="title">{{currentData.shop_name}}</h2>
          <div class="m-btn" @click="handleChooseShop"> <i class="el-icon-refresh"></i>更换门店</div>
          <chooseDate ref="date"></chooseDate>
          <div class="m-btn" @click="searchBill"> <i class="el-icon-search"></i>查询</div>
          <billPanel :parcel="billData" v-if="billData" :currentChannel="currentData.channel" @upload="searchList"></billPanel>
          <div class="m-button" v-if="billData">
            <div class="m-btn" @click="uploadFinancalBill" >导出报表</div>
          </div>
          <div class="m-panel" v-if="billData">
            <listNav :parcel="listNavData.normalNav" keyName="state" v-if="currentData.channel== 'lehui' || currentData.channel== 'shanhui' ||currentData.channel== 'dianping'" @upload="searchList"></listNav>
            <listNav :parcel="listNavData.freeNav" keyName="pay_type" v-if="currentData.channel== 'free'" @upload="searchList"></listNav>
            <financalList :parcel="billListData" :channel="currentData.channel" :total="total" @upload="searchList"></financalList>
          </div>
        </el-main>
      </el-container>
      <chooseShopDailog :shops="shops" :currentShop="currentData.shop_id" :switchShopVisible="switchShopVisible" @closeChooseShop="closeChooseShop" @upload="handleShopChange"/>
    </el-container>
  </div>
</template>

<style scoped  lang = "scss">
  #traiding {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
  }
  .el-main{padding:30px}
  .el-header{padding:0;}

  .m-container{
    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }
    .m-btn{
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding:5px 10px;
      cursor: pointer;
      margin:0 20px
    }
    .m-button{
      text-align: center;
      .m-btn{
        display: inline-block;
        padding:5px 30px;
        background: #FF679E;
        border-radius: 101px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 28px;
        margin:30px 10px;
      }
    }
    .m-panel{
      padding:20px;
      background: #FFFFFF;
      box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
    }
  }

</style>
